<template>
    <view class="shop-data">
        <u-tabs :list="tabList" :is-scroll="false" :current="currentTab" @change="handleTabChange" 
            :active-color="'#2979ff'" 
            :inactive-color="'#606266'"
            :bar-style="{
                backgroundColor: '#2979ff',
                height: '4rpx'
            }"
        />
        
        <view class="content">
            <!-- 交易数据 -->
            <template v-if="currentTab === 0">
                <view class="section-title">
                    <text class="title-text">最近7天</text>
                    <text class="title-desc">数据统计</text>
                </view>
                
                <view class="stats-grid">
                    <view class="stats-card">
                        <view class="card-icon">
                            <u-icon name="order" color="#2979ff" size="40"></u-icon>
                        </view>
                        <view class="card-content">
                            <view class="card-label">成交订单(笔)</view>
                            <view class="card-value">{{tradingInfo.order_num}}</view>
                        </view>
                    </view>
                    <view class="stats-card">
                        <view class="card-icon">
                            <u-icon name="rmb-circle" color="#2979ff" size="40"></u-icon>
                        </view>
                        <view class="card-content">
                            <view class="card-label">营业额(元)</view>
                            <view class="card-value primary">{{tradingInfo.order_amount}}</view>
                        </view>
                    </view>
                </view>

                <view class="chart-section">
                    <view class="chart-header">
                        <text class="chart-title">成交趋势图</text>
                        <text class="chart-desc">每日成交订单数量</text>
                    </view>
                    <view class="chart-container">
                        <charts ids="canvasColumn" width="100%" height="544rpx" :chartData="dealData"></charts>
                    </view>
                </view>

                <view class="chart-section">
                    <view class="chart-header">
                        <text class="chart-title">营业额趋势图</text>
                        <text class="chart-desc">每日营业额统计</text>
                    </view>
                    <view class="chart-container">
                        <charts ids="canvasColumn2" width="100%" height="544rpx" :chartData="turnoverData"></charts>
                    </view>
                </view>
            </template>

            <!-- 商品数据 -->
            <template v-if="currentTab === 1">
                <view class="section-title">
                    <text class="title-text">商品分析</text>
                    <text class="title-desc">商品销售数据</text>
                </view>
                
                <view class="goods-list">
                    <block v-for="(item, index) in goodsInfo" :key="index">
                        <view class="goods-card" @click="toDetail(item.id)">
                            <u-image :src="item.image" width="160rpx" height="160rpx" radius="8"></u-image>
                            <view class="goods-info">
                                <view class="goods-name">{{item.goods_name}}</view>
                                <view class="goods-stats">
                                    <view class="stat-item">
                                        <u-icon name="shopping-cart" size="24" color="#909399"></u-icon>
                                        <text class="stat-text">销量 {{item.sales_volume}}</text>
                                    </view>
                                    <view class="stat-item">
                                        <u-icon name="rmb" size="24" color="#909399"></u-icon>
                                        <text class="stat-text">销售额: {{item.sales_price}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </template>

            <!-- 访问数据 -->
            <template v-if="currentTab === 2">
                <view class="section-title">
                    <text class="title-text">访问分析</text>
                    <text class="title-desc">店铺访问数据</text>
                </view>
                
                <view class="stats-card full-width">
                    <view class="card-icon">
                        <u-icon name="account" color="#2979ff" size="40"></u-icon>
                    </view>
                    <view class="card-content">
                        <view class="card-label">进店人数(人)</view>
                        <view class="card-value">{{visitInfo.user_count}}</view>
                    </view>
                </view>

                <view class="chart-section">
                    <view class="chart-header">
                        <text class="chart-title">进店人数趋势图</text>
                        <text class="chart-desc">每日访问人数统计</text>
                    </view>
                    <view class="chart-container">
                        <charts ids="canvasColumn" width="100%" height="544rpx" :chartData="visitData"></charts>
                    </view>
                </view>
            </template>
        </view>

        <u-toast ref="uToast" />
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { 
    apiStatisticsGoodslist,
    apiStatisticsTrading,
    apiStatisticsVisit 
} from '@/api/store'

export default {
    name: 'ShopData',
    
    data() {
        return {
            tabList: [
                { name: '交易分析' },
                { name: '商品分析' },
                { name: '访问分析' }
            ],
            currentTab: 0,
            tradingInfo: {},
            dealData: {},
            turnoverData: {},
            goodsInfo: [],
            visitInfo: {},
            visitData: {}
        }
    },
    
    onLoad() {
        this.fetchData(this.currentTab)
    },
    
    methods: {
        handleTabChange(index) {
            this.currentTab = index
            this.fetchData(index)
        },
        
        toDetail(id) {
            this.$Router.push({
                path: '/pages/goods_detail/goods_detail',
                query: { id }
            })
        },
        
        async fetchData(index) {
            try {
                switch(index) {
                    case 0:
                        const tradingRes = await apiStatisticsTrading()
                        this.tradingInfo = tradingRes
                        this.dealData = {
                            categories: tradingRes.days,
                            series: [{
                                name: '成交订单',
                                data: tradingRes.echarts_order_num_add
                            }]
                        }
                        this.turnoverData = {
                            categories: tradingRes.days,
                            series: [{
                                name: '营业额',
                                data: tradingRes.echarts_order_amount_add
                            }]
                        }
                        break
                    case 1:
                        const goodsRes = await apiStatisticsGoodslist()
                        this.goodsInfo = goodsRes.lists
                        break
                    case 2:
                        const visitRes = await apiStatisticsVisit()
                        this.visitInfo = visitRes
                        this.visitData = {
                            categories: visitRes.days,
                            series: [{
                                name: '进店人数',
                                data: visitRes.echarts_add
                            }]
                        }
                        break
                }
            } catch (error) {
                this.$refs.uToast.show({
                    title: '数据加载失败',
                    type: 'error'
                })
            }
        }
    }
}
</script>

<style lang="scss">
// 颜色变量
$color-primary: #2979ff;
$color-white: #ffffff;
$color-bg: #f5f7fa;
$color-text: #303133;
$color-text-light: #909399;
$color-text-muted: #606266;
$color-border: #ebeef5;
$color-shadow: rgba(0, 0, 0, 0.05);

// 文本省略号 mixin
@mixin text-ellipsis($line: 1) {
    @if $line == 1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } @else {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $line;
        overflow: hidden;
    }
}

// 动画
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.shop-data {
    min-height: 100vh;
    background-color: $color-bg;
    padding-bottom: 30rpx;
    
    .content {
        padding: 20rpx;
    }
    
    .section-title {
        margin: 30rpx 0;
        padding: 0 10rpx;
        display: flex;
        align-items: baseline;
        
        .title-text {
            font-size: 36rpx;
            font-weight: 600;
            color: $color-text;
            position: relative;
            padding-left: 20rpx;
            
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 6rpx;
                height: 30rpx;
                background-color: $color-primary;
                border-radius: 3rpx;
            }
        }
        
        .title-desc {
            font-size: 24rpx;
            color: $color-text-light;
            margin-left: 20rpx;
            background-color: rgba($color-primary, 0.1);
            padding: 4rpx 12rpx;
            border-radius: 20rpx;
        }
    }
    
    .stats-grid {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
        gap: 20rpx;
    }
    
    .stats-card {
        display: flex;
        align-items: center;
        flex: 1;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: $color-white;
        box-shadow: 0 4rpx 16rpx $color-shadow;
        transition: all 0.3s ease;
        animation: fadeIn 0.5s ease;
        
        &:hover {
            transform: translateY(-4rpx);
            box-shadow: 0 8rpx 24rpx $color-shadow;
        }
        
        &.full-width {
            width: 100%;
        }
        
        .card-icon {
            margin-right: 20rpx;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            background-color: rgba($color-primary, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .card-content {
            flex: 1;
        }
        
        .card-label {
            font-size: 24rpx;
            color: $color-text-light;
            margin-bottom: 10rpx;
        }
        
        .card-value {
            font-size: 48rpx;
            font-weight: 600;
            color: $color-text;
            font-family: 'DIN Alternate', sans-serif;
            
            &.primary {
                color: $color-primary;
            }
        }
    }
    
    .chart-section {
        margin-bottom: 30rpx;
        animation: fadeIn 0.5s ease;
        
        .chart-header {
            margin-bottom: 20rpx;
            padding: 0 10rpx;
            display: flex;
            align-items: center;
            
            .chart-title {
                font-size: 32rpx;
                font-weight: 600;
                color: $color-text;
                position: relative;
                padding-left: 20rpx;
                
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 6rpx;
                    height: 24rpx;
                    background-color: $color-primary;
                    border-radius: 3rpx;
                }
            }
            
            .chart-desc {
                font-size: 24rpx;
                color: $color-text-light;
                margin-left: 20rpx;
                background-color: rgba($color-primary, 0.1);
                padding: 4rpx 12rpx;
                border-radius: 20rpx;
            }
        }
        
        .chart-container {
            padding: 30rpx;
            border-radius: 20rpx;
            background-color: $color-white;
            box-shadow: 0 4rpx 16rpx $color-shadow;
            border: 1rpx solid $color-border;
        }
    }
    
    .goods-list {
        .goods-card {
            display: flex;
            padding: 30rpx;
            margin-bottom: 20rpx;
            border-radius: 20rpx;
            background-color: $color-white;
            box-shadow: 0 4rpx 16rpx $color-shadow;
            transition: all 0.3s ease;
            animation: fadeIn 0.5s ease;
            border: 1rpx solid $color-border;
            
            &:active {
                transform: scale(0.98);
            }
            
            .goods-info {
                flex: 1;
                margin-left: 20rpx;
                
                .goods-name {
                    font-size: 30rpx;
                    color: $color-text;
                    margin-bottom: 20rpx;
                    @include text-ellipsis(2);
                    font-weight: 500;
                }
                
                .goods-stats {
                    display: flex;
                    justify-content: space-between;
                    
                    .stat-item {
                        display: flex;
                        align-items: center;
                        background-color: rgba($color-primary, 0.05);
                        padding: 8rpx 16rpx;
                        border-radius: 20rpx;
                        
                        .stat-text {
                            font-size: 24rpx;
                            color: $color-text-muted;
                            margin-left: 8rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
